<template>
	<el-tabs v-model="activeName" @tab-click="handleClick">
		<el-tab-pane label="轮播图" name="first">
			<div style="float: right;margin-right:2%;">
				<el-button style="margin: 10px 0;" :disabled="!isAuth('bannerList:add')" size="mini" type="primary"
					icon="document" @click="amendBanner(null,{},'add')">轮播图</el-button>
			</div>
			<el-table v-loading="tableDataLoading" :data="tableData">
				<el-table-column fixed prop="id" label="编号" width="50"></el-table-column>
				<el-table-column prop="imageUrl" label="头像">
					<template slot-scope="scope">
						　　<img :src="scope.row.imageUrl" width="60" height="60" />
					</template>
				</el-table-column>
				<el-table-column prop="name" label="轮播图名称"></el-table-column>
				<el-table-column prop="type" label="类型">
					<template slot-scope="scope">
					{{scope.row.type==0?'司机端':'乘客端'}}
					</template>
				</el-table-column>
				<el-table-column prop="state" label="状态">
					<template slot-scope="scope">
						<span v-if="scope.row.state == 1">显示</span>
						<span v-if="scope.row.state == 2" style="color: #f56c6c;">隐藏</span>
					</template>
				</el-table-column>
				<el-table-column prop="state" label="是否启用">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.state" @change="change(scope.row.state,scope.row)"
							:active-value="openValue" :inactive-value="closeValue" active-color="#13ce66"
							inactive-color="#ff4949">
						</el-switch>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
				<el-table-column label="操作" width="180">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" :disabled="!isAuth('bannerList:update')"
							@click="amendBanner(scope.$index, scope.row,'edit')">修改
						</el-button>
						<el-button size="mini" type="danger" :disabled="!isAuth('bannerList:delete')"
							@click="deletes(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-tab-pane>
		<el-tab-pane label="分享图" name="fivethly">
			<div style="float: right;margin-right:2%;">
				<el-button style="margin: 10px 0;" :disabled="!isAuth('bannerList:add')" size="mini" type="primary"
					icon="document" @click="addNotice">添加分享图</el-button>
			</div>
			<el-table v-loading="tableDataLoading" :data="tableData">
				<el-table-column fixed prop="id" label="编号" width="50"></el-table-column>
				<el-table-column prop="imageUrl" label="头像">
					<template slot-scope="scope">
						　　<img :src="scope.row.imageUrl" width="60" height="60" />
					</template>
				</el-table-column>
				<el-table-column prop="name" label="名称"></el-table-column>
				<el-table-column prop="url" label="链接"></el-table-column>
				<el-table-column prop="state" label="状态">
					<template slot-scope="scope">
						<span v-if="scope.row.state == 1">显示</span>
						<span v-if="scope.row.state == 2" style="color: #f56c6c;">隐藏</span>
					</template>
				</el-table-column>
				<el-table-column prop="state" label="是否启用">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.state" @change="change(scope.row.state,scope.row)"
							:active-value="openValue" :inactive-value="closeValue" active-color="#13ce66"
							inactive-color="#ff4949">
						</el-switch>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
				<el-table-column label="操作" width="180">
					<template slot-scope="scope">
						<el-button size="mini" type="primary" :disabled="!isAuth('bannerList:update')"
							@click="amendBanner(scope.$index, scope.row)">修改
						</el-button>
						<el-button size="mini" type="danger" :disabled="!isAuth('bannerList:delete')"
							@click="deletes(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- <div style="text-align: center;margin-top: 10px;float:right">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:page-sizes="[5, 10, 15, 20]" :page-size="limit" :current-page="page"
					layout="total,sizes, prev, pager, next,jumper" :total="tableData.length">
				</el-pagination>
			</div> -->
			<!-- 添加弹框 -->
		</el-tab-pane>
		<!-- 修改弹框 -->
		<el-dialog :title="titName" :visible.sync="dialogFormVisible1" center>
			<el-form :model="form" :rules="rules" ref="form">
					<el-form-item label="类型" prop="type" :label-width="formLabelWidth">
						<el-radio v-model="form.type" :label="0">司机端</el-radio>
						<el-radio v-model="form.type" :label="1">乘客端</el-radio>
					</el-form-item>
				<el-form-item label="图片：" :label-width="formLabelWidth" prop="imageUrl">
					<div
						style=" width:148px;height:148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
						<el-upload class="avatar-uploader" v-model="imageUrl"
							:action="$http.adornUrlUp('sys/file/upload')" :show-file-list="false"
							:on-success="handleAvatarSuccess2" :headers="headers">
							<img v-if="form.imageUrl" :src="form.imageUrl" class="avatar"
								style="border-radius: 6px;width: 148px;height: 148px;" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</div>
				</el-form-item>
				<el-form-item label="链接：" :label-width="formLabelWidth" prop="url">
					<el-input v-model="form.url" style="width:65%;"></el-input>
				</el-form-item>
				<el-form-item label="名称：" :label-width="formLabelWidth" prop="name">
					<el-input v-model="form.name" style="width:65%;"></el-input>
				</el-form-item>
				<el-form-item label="备注：" :label-width="formLabelWidth" prop="describes">
					<el-input v-model="form.describes" style="width:65%;"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible1 = false">取 消</el-button>
				<el-button type="primary" @click="amendNoticeTo()">确 定</el-button>
			</div>
		</el-dialog>
	</el-tabs>
</template>

<script>
	import Vue from 'vue'

	export default {
		data() {
			return {
				headers:{
Token:Vue.cookie.get('token')
				},
				titName:'',
				page: 1,
				limit: 10,
				size: 5,
				classify: 1,
				openValue: 1,
				closeValue: 2,
				name: '',
				imageUrl: '',
				url: '',
				state: 1,
				describes: '',
				hideUpload: false,
				activeName: 'first',
				dialogFormVisible: false,
				dialogFormVisibleG: false,
				dialogFormVisible1: false,
				dialogFormVisible2: false,
				dialogFormVisible3: false,
				dialogFormVisible4: false,
				dialogFormVisible5: false,
				dialogFormVisible6: false,
				tableDataLoading: false,
				formLabelWidth: '200px',
				tableData: [],
				gonggaoData: {},
				choicenData: [],
				choicenData2: [],
				checkBoxData: [], //多选框选择的值
				keyword: '',
				info: {
					stockDate: this.getNowTime(), //日期
				},
				states: [{
						label: '显示',
						value: 1
					},
					{
						label: '隐藏',
						value: 2
					}
				],
				type: 1,
				types: [{
						value: 1,
						label: '文字'
					},
					{
						value: 2,
						label: '链接'
					}
				],
				form: {
					id: '',
					name: '',
					imageUrl: '',
					url: '',
					classify: '',
					createTime: '',
					sort: '',
					state:1,
					describes: '',
					type: '',
					title: '',

				},
				rules:{
					type: [
						{required: true, message: '请选择类型', trigger: 'change'},
					],
					imageUrl: [
						{required: true, message: '请上传图片', trigger: 'change'},
					]
				},
				title: '',
			}
		},
		methods: {
			// 多选
			changeFun(val) {
				this.checkBoxData = val
			},
			//处理默认选中当前日期
			getNowTime() {
				var now = new Date()
				var year = now.getFullYear() //得到年份
				var month = now.getMonth() //得到月份
				var date = now.getDate() //得到日期
				var hh = now.getHours() < 10 ? '0' + now.getHours() : now.getHours()
				var mm = now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes()
				var ss = now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds()
				month = month + 1
				month = month.toString().padStart(2, '0')
				date = date.toString().padStart(2, '0')
				var defaultDate = `${year}-${month}-${date} ${hh}:${mm}:${ss}`
				return defaultDate
				this.$set(this.info, 'stockDate', defaultDate)
			},
			// tabs切换
			handleClick(tab, event) {

				if (tab._props.label == '轮播图') {
					this.page = 1
					this.limit = 10
					this.classify = 1
					this.dataSelect()
				}

				if (tab._props.label == '分享图') {
					this.page = 1
					this.limit = 10
					this.classify = 5
					this.dataSelect()
				}

			},
			//上传成功
			handleAvatarSuccess(file) {
				this.imageUrl = file.data
			},
			handleAvatarSuccess2(file2) {
				console.log('fffff',file2)
				let  imageUrl = "https://obs.qishiyunfu.com/"+file2.data.filePath
				this.$set(this.form,'imageUrl',imageUrl)
			},
			handleSizeChange(val) {
				this.limit = val
				this.dataSelect()
			},
			handleCurrentChange(val) {
				this.page = val
				this.dataSelect()
			},


			// 是否启用
			change(val, row) {
				this.$http({
					url: this.$http.adornUrl(`banner/updateBannerStateById?id=${row.id}`),
					method: 'post',
					data: this.$http.adornData({})
				}).then(({
					data
				}) => {
					if (data.code == 0) {
						this.$message({
							message: '操作成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.dataSelect()
							}
						})
					} else {
						this.$message({
							message: data.msg,
							type: 'warning',
							duration: 1500,
							onClose: () => {
								this.dataSelect()
							}
						})
					}

				})
			},
			//添加banner图
			addNotice() {
				this.imageUrl = ''
				this.state = ''
				this.url = ''
				this.name = ''
				this.describes = ''
				this.dialogFormVisible = true
			},
			// 添加banner图
			addNoticeTo() {
				if (this.imageUrl == '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请上传图片',
						type: 'warning'
					})
					return
				}
				if (this.name == '') {
					this.$notify({
						title: '提示',
						duration: 1800,
						message: '请输入名称',
						type: 'warning'
					})
					return
				}
				this.$refs["form"].validate((valid) => {
					if (valid) {
						this.$http({
							url: this.$http.adornUrl('banner/insertBanner'),
							method: 'post',
							data: this.$http.adornData({
								'classify': this.classify,
								'imageUrl': this.imageUrl,
								'state': this.state,
								'url': this.url,
								'name': this.name,
								'describes': this.describes
							})
						}).then(({
							data
						}) => {
							if (data.code == 0) {
								this.dialogFormVisible = false
								this.$message({
									message: '操作成功',
									type: 'success',
									duration: 1500,
									onClose: () => {

										this.dataSelect()
									}
								})
							} else {
								this.$message({
									message: data.msg,
									type: 'warning',
									duration: 1500,
									onClose: () => {}
								})
							}

						})
					} else {
						console.log('error submit!!');
						return false;
					}
				})

			},
			// 修改
			amendBanner(index, rows,state) {
				switch (state){
					case 'add':
						this.titName='添加轮播'
						this.dialogFormVisible1=true
						this.form = {
							name: '',
							imageUrl: '',
							url: '',
							classify: '',
							createTime: '',
							sort: '',
							state: '',
							describes: '',
							type: '',
							title: '',
						}
						break;
					case 'edit':
						this.titName='添加轮播'
						this.dialogFormVisible1=true
						this.form = rows
						break;
				}
				console.log(rows)
				this.dialogFormVisible1 = true
				this.form=rows
			},
			// 修改
			amendNoticeTo() {
				this.$refs["form"].validate((valid) => {
					if(valid){
						if(this.form.id){
							this.$http({
								url: this.$http.adornUrl('banner/updateBannerById'),
								method: 'post',
								data: {
									id: this.form.id,
									createTime: this.info.stockDate,
									imageUrl: this.form.imageUrl,
									url: this.form.url,
									state:this.form.state,
									classify: this.classify,
									name: this.form.name,
									describes: this.form.describes,
									type: this.form.type,
								}
							}).then(({
								data
							}) => {
								if (data.code == 0) {
									this.dialogFormVisible1 = false
									this.$message({
										message: '操作成功',
										type: 'success',
										duration: 1500,
										onClose: () => {
											this.dataSelect()
										}
									})
								} else {
									this.$message({
										message: data.msg,
										type: 'warning',
										duration: 1500,
										onClose: () => {
										}
									})
								}

							})
						}else{
							this.$http({
								url: this.$http.adornUrl('banner/insertBanner'),
								method: 'post',
								data: {
									createTime: this.info.stockDate,
									imageUrl: this.form.imageUrl,
									url: this.form.url,
									state: 1,
									name: this.form.name,
									describes: this.form.describes,
									type: this.form.type,
									classify: this.classify,
								}
							}).then(({
								data
							}) => {
								if (data.code == 0) {
									this.dialogFormVisible1 = false
									this.$message({
										message: '操作成功',
										type: 'success',
										duration: 1500,
										onClose: () => {
											this.dataSelect()
										}
									})
								} else {
									this.$message({
										message: data.msg,
										type: 'warning',
										duration: 1500,
										onClose: () => {
										}
									})
								}

							})
						}

					}else{
                       this.$message.error("请填写必填选项")
					}
				})
			},
			// 删除banner图
			deletes(row) {
				let delid = row.id
				this.$confirm(`确定删除此条信息?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						url: this.$http.adornUrl(`banner/deleteBannerById?ids=${delid}`),
						method: 'get',
						data: this.$http.adornData({})
					}).then(({
						data
					}) => {
						if (data.code == 0) {
							this.$message({
								message: '删除成功',
								type: 'success',
								duration: 1500,
								onClose: () => {
									this.dataSelect()
								}
							})
						} else {
							this.$message({
								message: data.msg,
								type: 'warning',
								duration: 1500,
								onClose: () => {}
							})
						}

					})
				}).catch(() => {})

			},
			// 获取数据列表
			dataSelect() {
				this.tableDataLoading = true
				this.$http({
					url: this.$http.adornUrl('banner/selectBannerList'),
					method: 'post',
					data: {
						state: this.state,
						classify: this.classify,
					}
				}).then(({
					data
				}) => {
					this.tableDataLoading = false
					if (data && data.code === 0) {
						let returnData = data.data
						this.tableData = returnData
					}else{
						this.$message({
							message: data.msg,
							type: 'error',
							duration: 1500,
						})
					}

				})
			},

		},
		mounted() {
			this.dataSelect()
		}
	}
</script>

<style>
	.customWidth {
		width: 80% !important;
	}
</style>
